<template>
  <el-card class="box-card">
    <itable
    :table="tconfig.tableConfig"
    :tableData="tconfig.tableData"
    :page-bean="tconfig.pageBean"
    @pageChange="pageChange"
    @handleInfo="handleInfo"
    @handleEdit="handleEdit"
    @handleDel="handleDel"
    >
      <template #searchBox>
        <Eform
          :model="form"
          :elem="fromData"
          :submit="true"
          :reset="true"
          :button="false"
          okIcon="Search"
          btnSize="default"
          submitText="搜索"
          @onSuccess="onSuccess"
          @onReset="onReset"
          >
        </Eform>
      </template>

      <template #headerbtn>
        <el-button type="primary" plain @click="clickadd" icon="Plus">添加</el-button>
      </template>
    </itable>

    <el-dialog
    :title="title == 0?'新增':title == 1?'查看':'改名'"
    v-model="dialogVisible"
    :before-close="handleClose"
    width="40%">
    <template v-if="title == 1">
      <itable
      :table="tdconfig.tableConfig"
      :tableData="tdconfig.tableData"
      :page-bean="tdconfig.pageBean"
      @pageChange="tdpageChange"
      @handleEdit="handleSetPost"
      @handleDel="tdhandlelogDel"
      >
      <template #company_group_type="prop">
        <span>{{ prop.obj.row.company_group_type == 1 ? '组长' : '组员' }}</span>
      </template>
      <template #headerbtn>
        <el-button type="primary" plain @click="addStaff" icon="Plus">添加人员</el-button>
      </template>
    </itable>
    </template>
    <template v-else>
      <Eform
          :model="dform"
          :rules="drules"
          :elem="dfromData"
          btnSize="large"
          :inline="false"
          :submit="false"
          :reset="false"
          :button="false"
          ref="ruleFormRef"
          labelPosition="left"
        >
      </Eform>
    </template>
    <template #footer v-if="title !== 1">
      <span class="dialog-footer">
          <el-button @click="clickCancel">取 消</el-button>
          <el-button type="primary" @click="clickComfig">保 存</el-button>
      </span>
  </template>
  </el-dialog>
  <staffList :drawer="drawerFlag" :select_type="select_type" @drawerClose="drawerClose" @confirmClick="confirmClick"/>
  </el-card>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue';
import itable from '@/components/table/table.vue'
import { PageBean } from "@/utils/page-bean";
import Eform from '@/components/eform/index.vue';
import useCurrentInstance from '@/utils/useCurrentInstance';
import { ElMessageBox } from 'element-plus'
import staffList from '../components/staffList.vue';

const { proxy } = useCurrentInstance()
let title = ref(0)
let drawerFlag = ref(false)
let dialogVisible = ref(false)
let select_type = ref('1')
let fromData = reactive([
  {
    label: "小组名称",
    prop: "name",
    clearable: true,
  },
  {
    label: "组长姓名",
    prop: "leader",
    clearable: true,
  }
])
let form = reactive({
  page:1,
  size:10,
  name:'',
  leader:''
})
let dfromData = reactive([
  {
    label: "小组名称",
    prop: "name",
    labelWidth:'100px',
    size:'large',
    clearable: true,
    elemStyle:{paddingBottom:'10px'},
  }
])
let drules = reactive({
  name:[
    { required: true, message: '请输入小组名称', trigger: 'blur' },
  ]
})
let dform = reactive({
  name:''
})
let params = ref({
  id:''
})
const tconfig = reactive({
  tableConfig: {} as {loading:boolean,[propName:string]:any},
  tableData: [] as any[],
  pageBean: new PageBean(10, 1, 0),
})
const tdconfig = reactive({
  tableConfig: {} as {loading:boolean,[propName:string]:any},
  tableData: [] as any[],
  pageBean: new PageBean(10, 1, 0),
})

// 重置
const onReset = () => {
  tconfig.pageBean.pageIndex = 1
  getformLists()
}
// 搜索
const onSuccess = () => {
  tconfig.pageBean.pageIndex = 1
  getformLists()
}

// 新增组
const clickadd = () => {
  title.value = 0
  dform.name = '',
  delete dform?.id
  dialogVisible.value = true
}
// 新增组员
const addStaff = () => {
  select_type.value = '1'
  drawerFlag.value = true
}
let ruleFormRef = ref()
// 弹框-提交
const clickComfig = () => {
  ruleFormRef.value.validate().then(val => {
    if(val){
      // 新增
      if(title.value == 0){
        proxy.$api.getCreateGroup(dform).then(res => {
          if(res.code == 200){
            proxy.$message({
              type:'success',
              message:res.msg
            })
            getformLists()
          }
        })
      }
      // 修改
      if(title.value == 2){
        proxy.$api.getGroupUpdate(dform).then(res => {
          if(res.code == 200){
            proxy.$message({
              type:'success',
              message:res.msg
            })
            getformLists()
          }
        })
      }
      dialogVisible.value = false
    }
  })
}
// 弹框-取消
const clickCancel = () => {
  ruleFormRef.value.concel()
  dialogVisible.value = false
}
const handleClose = () => {
  if(ruleFormRef.value) ruleFormRef.value.concel()
  dialogVisible.value = false
}
// 设置组长
const handleSetPost = (a, b, id) => {
  proxy.$api.setGroupMemberLeader({group_id:b.company_group_id,staff_id:b.id}).then(res => {
    proxy.$message({
      type:'success',
      message:res.msg
    })
    getGroupData(b.company_group_id)
  })
}
// 删除人员
const tdhandlelogDel = (a, b, id) => {
  ElMessageBox.confirm(
    '此操作将永久删除该数据,是否继续?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    proxy.$api.getGroupMemberdel({group_id:b.company_group_id,staff_id:b.id}).then(res => {
      if(res.code == 200){
        proxy.$message({
          type:'success',
          message:res.msg
        })
        getGroupData(b.company_group_id)
        getformLists()
      }
    })
  })
  .catch(() => {
    proxy.$message({
      type: 'info',
      message: '已取消删除',
    })
  })
}

// 表格-查看人员
const handleInfo = (a, b, id) => {
  title.value = 1
  params.value.id = b.id
  getGroupData(b.id)
  dialogVisible.value = true
}
// 表格-修改小组
const handleEdit = (a, b, id) => {
  title.value = 2
  dform.name = b.name,
  dform.id = b.id
  dialogVisible.value = true
}
// 表格-删除小组
const handleDel = (a, b, id) => {
  ElMessageBox.confirm(
    '此操作将永久删除该数据,是否继续?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    proxy.$api.getGroupDelete({id:b.id}).then(res => {
      proxy.$message({
        type:'success',
        message:res.msg
      })
      getformLists()
    })
  })
  .catch(() => {
    proxy.$message({
      type: 'info',
      message: '已取消删除',
    })
  })
}

// 分页
const pageChange = () => {
  getformLists()
}
// 弹框-分页
const tdpageChange = () => {

}
const drawerClose = (val) => {
  drawerFlag.value = val
}
// 添加成员
const confirmClick = (val) => {
  let data = [] as Array<string|number>
  val.map(item => {
    data.push(item.id)
  })
  proxy.$api.getGroupMemberadd({group_id:params.value.id,staff_id:data}).then(res => {
    if(res.code == 200){
        proxy.$message({
          type: 'success',
          message: res.msg,
        })
        getGroupData(params.value.id)
      }
  })
}
// 小组列表
const getformLists = () => {
  tconfig.tableConfig.loading = true
  form.page = tconfig.pageBean.pageIndex
  tconfig.tableData = []
  proxy.$api.getGroupLists(form).then(res => {
    tconfig.tableData = res.result.lists
    tconfig.pageBean.Total = res.result.total_rows
    tconfig.tableConfig.loading = false
  }).catch(err => {tconfig.tableConfig.loading = false})
}
// 员工列表
const getGroupData = (id) => {
  tdconfig.tableConfig.loading = true
  proxy.$api.getGroupMember({id:id}).then(res => {
    tdconfig.tableData = res.result
    tdconfig.tableConfig.loading = false
  }).catch(err => {tdconfig.tableConfig.loading = false})
}
getformLists()
// 初始化表格
const initTable = () => {
tconfig.tableConfig = {
  loading: true,
  hasSelect: false,
  hasIndex: true,
  hasOperation: true,
  hasSearch: true,
  hasPage: true,
  headerShowBtn:true,
  tr: [
    {
      label: "小组名称",
      prop: "name",
    },
    {
      label: "组长名称",
      prop: "leader",
    },
    {
      label: "小组人数",
      prop: "members",
    }
  ],
  operation:{
    label:'操作',
    width:'330',
    data:[
      { label:'查看组员', type:'', icon:'Search', Fun:'handleInfo', id: 0 },
      { label:'改名', type:'', icon:'EditPen', Fun:'handleEdit', id: 1 },
      { label:'删除', type:'danger',icon:'Delete', Fun:'handleDel', id: 2 },
    ]
  }
}
}
const initTabletwo = () => {
  tdconfig.tableConfig = {
  loading: false,
  hasSelect: false,
  hasIndex: true,
  hasOperation: true,
  hasSearch: true,
  hasPage: false,
  headerShowBtn:false,
  tr: [
    {
      label: "姓名",
      prop: "name",
    },
    {
      label: "角色",
      prop: "company_group_type",
      show:'template'
    }
  ],
  operation:{
    label:'操作',
    width:'200',
    data:[
      { label:'设置组长', type:'', Fun:'handleEdit', id: 1 },
      { label:'删除', type:'danger', Fun:'handleDel', id: 2 },
    ]
  }
}
}
initTable()
initTabletwo()
</script>

<style lang='scss' scoped>
:deep(.el-dialog__body){
.el-form>.el-form-item{
  width: 45%;
  margin-bottom: 20px;
  margin-left: 10px;
}
.el-select{
  width: 100%;
}
}
.dialog-footer{
  width: 100%;
  display: flex;
  justify-content: center;
  // .el-button{
  //   width: 90%;
  // }
}
</style>
